<template>
  <!-- 活动列表页 -->
  <div class="c-bg-sgray c-p">
    <div class="c-bg-lg180-F5F7FA c-pa c-pz1 c-w100 c-hh500"></div>
    <section class="c-pf c-pz10 c-w100" :class="isScroll ? 'c-bg-white' : ''">
      <new-search-bar bgSearch="c-pt24-i c-pb0-i" searchIconClass="c-fc-xblack" placeholder='请输入关键字' @search="startSearch" @cancel="startSearch"></new-search-bar>
      <my-small-tabbar :tabList="tabList" :tabIndex="activityType" :fontSet="{defaultColor:'c-fc-gray', activeColor:'c-fc-xblack c-fw600'}" @changeTab="changeType"></my-small-tabbar>
    </section>
    <div v-if="activityList != null && activityList.length > 0" class="c-ph24 c-pt180 c-p c-pz2">
      <div v-for="(item,index) in activityList" :key="index" class="c-bg-white c-br16 c-pb24" :class="index==0 ? '' : 'c-mt30'" @click.stop="clickActivityItem(item.activityId)">
        <div class="c-w100 c-text-hidden c-p c-br-tr16 c-br-tl16 c-p c-pz1">
          <img class="c-w100 c-h-auto imgCloseBig" v-lazy="item.poster || require('../../assets/activity_defult.png')" :key="item.poster" />
          <div v-if="statusMap[item.enrollStatus == 2 ? 3 : item.status]" class="c-pa c-p-t0 c-p-l0 c-pz2 c-br-tl16 c-br-br16 c-hh32 c-pl12 c-pr10 c-fs20 c-fc-white c-flex-row c-flex-center" :class="statusMap[item.enrollStatus == 2 ? 3 : item.status].bgClass">{{statusMap[item.enrollStatus == 2 ? 3 : item.status].title}}</div>
        </div>
        <div class="c-ph24 c-pt20">
          <div class="c-fs28 c-w100 c-fw600 c-ww-bw c-ww-ba">{{item.name}}</div>
          <div class="c-fs20 c-mt16 c-flex-row c-fc-gray c-justify-sb">
            <div class="c-flex-row c-aligni-center">
              <span class="iconfont c-fs20 c-mr8">&#xe680;</span>
              <span>{{item.enrollStartAt | formatTime}} — {{item.enrollEndAt | formatTime }}</span>
            </div>
            <div class="c-flex-row c-aligni-center" v-show="item.isShowEnroll == 1">
              <span class="iconfont c-fs20 c-mr8">&#xe62a;</span>
              <span>{{item.enrollTicket}}人</span>
            </div>
          </div>
          <div class="c-w100 c-flex-row c-justify-sb" :class="item.city || item.province || item.isRefund==1 && !(item.price.split('~')[0]==item.price.split('~')[1] && (Number(item.price.split('~')[0])==0)) ? 'c-mt16' : ''">
            <!-- 活动的地址 -->
            <div class="c-flex-row c-aligni-center" v-if="item.city">
              <span class="iconfont c-fs20 c-fc-gray c-mr8">&#xe90f;</span>
              <span class="c-fs20 c-fc-gray">{{item.city}}</span>
            </div>
            <div class="c-flex-row c-aligni-center" v-else-if="item.province">
              <span class="iconfont c-fs20 c-fc-gray c-mr8">&#xe90f;</span>
              <span class="c-fs20 c-fc-gray">{{item.province}}</span>
            </div>
          </div>
          <!-- 价格 -->
          <div class="c-fs26 c-fc-xmlred c-mt14 c-flex-row c-aligni-center">
            <span class="c-fw600 c-mr20" v-if="item.price && item.isShowPrice == 1">
              <span class="c-fs22" v-if="checkPrice(item.price) > 1">{{'￥' | iosPriceFilter}}</span>
              <span v-if="checkPrice(item.price) == 1" class="c-fs28">免费</span>
              <span class="c-fs36" v-else-if="!$isWxAppIos()" v-html="$getPriceStyleHtml(item.price.split('~')[0], false, 7, 'c-fs24')"></span>
              <span v-if="!$isWxAppIos() && checkPrice(item.price) == 3" class="c-fs20 c-ml4">起</span>
            </span>
            <span class="c-mr20 c-br4 c-ph10 c-hh28 c-fc-xmlred c-bd1-xmlred c-bg-xmlred-10 c-fs18 c-inlineblack c-textAlign-c" v-if="item.price && item.isShowPrice == 1 && !$isWxAppIos() && item.vipMaxDiscount != null">会员减{{item.vipMaxDiscount}}元</span>
            <span class="c-br4 c-ph10 c-hh28 c-fc-white theme-bg c-fs18 c-inlineblack c-textAlign-c" v-if="item.isRefund==1 && !(item.price.split('~')[0]==item.price.split('~')[1] && (Number(item.price.split('~')[0])==0))">签到退款</span>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="activityList == null || activityList.length == 0" :noMoreData="loadingStatus == 'NO_MORE_DATA' && (activityList && activityList.length > 0)" :noDataText="'暂无活动'"></loading-status-tem>
    <div v-if="companyAuth != null && companyAuth.companyNav != null">
      <nav-bottom-bar :itemIndex="3" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 2"></nav-bottom-bar>
    </div>
    <my-loading :showLoading="isShowLoading"></my-loading>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import myLoading from "@/plugin/loading/loading.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1; //当前页面
export default {
  name: "ActivityIndex",
  components: {
    MySmallTabbar,
    NavBottomBar,
    myLoading,
    newSearchBar,
    loadingStatusTem,
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      activityType: 1,
      loadingStatus: " NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      pageSize: 10,
      activityList: [], // 活动数据
      isShowLoading: false, // 显示loading
      name: '', // 搜索的内容
      isLoading: false, // 是否已经加载
      tabList: [{
        title: '最近活动',
        index: 1,
      }, {
        title: '往期活动',
        index: 2,
      }],
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      isScroll: false,
      statusMap: {
        0: {title: '即将报名', bgClass: 'c-bg-38BD05'},
        1: {title: '报名中', bgClass: 'c-bg-38BD05'},
        2: {title: '报名截止', bgClass: 'c-bg-xlyellow'},
        3: {title: '已结束', bgClass: 'c-bg-ccc'} // enrollStatus=2也是已结束，相当于status=3，所以直接用这边的状态
      }
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  methods: {
    checkPrice(price) { // 1免费 2付费且单价格（不是价格区间，不是￥1.00起这种） 3付费且多价格（有价格区间，￥1.00起这种）
      const startPrice = price.split('~')[0]
      const endPrice = price.split('~')[1]
      if (startPrice == endPrice && (Number(startPrice) == 0) && (Number(endPrice) == 0)) { // 免费
        return 1
      }
      if (Number(startPrice) != 0 && startPrice == endPrice) { // 付费且单价格
        return 2
      }
      if ((Number(startPrice) != 0 || Number(endPrice) != 0) && startPrice != endPrice) { // 付费且多价格
        return 3
      }
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    changeType(tabIndex) {
      // 切换tab(最近活动和往期活动)
      this.activityType = tabIndex;
      this.isShowLoading = true;
      pageIndex = 1;
      this.getActivityList();
      setTimeout(() => {
        this.isShowLoading = false;
      }, 500);
    },
    startSearch(e) {
      // 点击搜索
      pageIndex = 1;
      this.name = e.searchValue
      this.getActivityList();
    },
    clickActivityItem(activityNo) {
      let toPath = `/activity/activityDetail?ActivityNo=${activityNo}&from=activity`;
      this.iosAppRouteChange(toPath);
    },
    getActivityList() {
      // 获取活动列表
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.postMethod(
          global.apiurl + "activities/mlists",
          {
            pageIndex: pageIndex,
            pageSize: this.pageSize,
            name: this.name,
            state: this.activityType
          },
          function (res) {
            $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
            if (pageIndex == 1) {
              $this.activityList = res.data;
            } else {
              $this.activityList = [...$this.activityList, ...res.data];
            }
            if ($this.activityList == null || $this.activityList.length == 0) {
              $this.noneShow = true;
            } else {
              $this.noneShow = false;
            }
            if (res.data && (res.data.length < $this.pageSize)) {
              $this.loadingStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              $this.loadingStatus = 'HAS_MORE_DATA';
              pageIndex++;
            }
            $this.isLoading = false;
          }
        );
      }
    },
    //分享
    wechatShare: function () {
      let title = '活动专区';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      const scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
      this.isScroll = scrollTop > 10
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'HAS_MORE_DATA') {
          that.getActivityList();
        }
      });
    },
    initData() {
      this.dataStatus = 'HAS_MORE_DATA';
      this.activityList = [];
      pageIndex = 1;
      this.name = ''
      this.getActivityList();
    },
  },
  activated() {
    setDocumentTitle("活动列表");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.activityList)) {
      this.initData()
    }
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.refund {
  color: #ff683e;
}
.pv1{padding-top: 0.025rem; padding-bottom: 0.025rem;}
</style>


